<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>打开新窗口</title>

        <!-- 建议显式指定 MIME 类型 -->
        <style type="text/css">
            [type=button] {
                border: 1px solid blue ;
                background: rgb(69, 69, 233) ;
                color: yellow;
            }
        </style>

    </head>
    <body>

        <h1>打开新窗口</h1>

        <!-- button 表示 按钮 -->
        <!-- type="button" 表示普通按钮 -->
        <!-- type="reset" 表示重置按钮(必须应用在表单中，用于重置表单) -->
        <!-- type="submit" 表示提交按钮(必须应用在表单中，用于提交表单) -->
        <button type="button">打开</button>

        <script type="text/javascript">
            // 根据CSS选择器选择匹配于该选择器的首个元素(若不存在则返回null) 
            let btn = document.querySelector( '[type=button]' );
            if( btn ) {

                const type = 'click' ; // 鼠标左键单击事件

                // 最典型事件监听器就是函数
                const listener = function(){
                    // console.log( Date.now() );
                    let url = 'window-target.html' ;
                    let target = '_blank' ;
                    let features = 'channelmode=yes,width=300,height=200,left=400,top=100,location=no' ;
                    window.open( url , target , features );
                }

                const capture = false ;

                // 为 btn 添加(add)事件(event)监听器(listener)
                btn.addEventListener( type , listener , capture );
            }
        </script>

        
    </body>
</html>